<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="slug" content="nongqing-jingxiang-platform">
    <title>有机净菜 - 健康生活从此开始</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/responsive.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <!-- 顶部标语 -->
    <div class="top-banner">
        <div class="banner-content">
            "农"情相伴，"净"享未来——数智化净菜助农平台
        </div>
    </div>

    <!-- 购物车弹窗 -->
    <div class="cart-popup">
        <div class="cart-popup-header">
            <h3>购物车</h3>
            <span class="close-popup">&times;</span>
        </div>
        <div class="cart-items"></div>
        <div class="cart-total"></div>
    </div>

    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="nav-container">
            <div class="logo">
                <img src="images/logo.png" alt="农情净享">
            </div>
            <div class="search-bar">
                <i class="fas fa-map-marker-alt location-icon"></i>
                <input type="text" placeholder="搜索食材、套餐、商家...">
                <button><i class="fas fa-search"></i></button>
            </div>
            <div class="nav-buttons">
                <a href="#" class="nav-link"><i class="fas fa-user"></i> 登录/注册</a>
                <a href="#" class="nav-link cart">
                    <i class="fas fa-shopping-cart"></i> 
                    <span class="cart-count">0</span>
                </a>
            </div>
        </div>
    </nav>

    <!-- 分类导航 -->
    <section class="category-nav">
        <div class="category-container">
            <a href="#" class="category-item">
                <img src="images/轮播图1.jpg" alt="新鲜蔬菜">
                <span>新鲜蔬菜</span>
            </a>
            <a href="#" class="category-item">
                <img src="images/轮播图2.jpg" alt="营养套餐">
                <span>营养套餐</span>
            </a>
            <a href="#" class="category-item">
                <img src="images/轮播图3.jpg" alt="有机水果">
                <span>有机水果</span>
            </a>
            <a href="#" class="category-item">
                <img src="images/轮播图4.jpg" alt="净菜配送">
                <span>净菜配送</span>
            </a>
        </div>
    </section>

    <!-- 主轮播图 -->
    <section class="hero-slider">
        <div class="slider-container">
            <div class="slide active">
                <img src="images/轮播图6.jpg" alt="新鲜蔬菜拼盘">
                <div class="slide-content">
                    <h1>精选净菜拼盘</h1>
                    <p>营养搭配，现切即食</p>
                </div>
            </div>
            <div class="slide">
                <img src="images/轮播图7.jpg" alt="新鲜蔬菜组合">
                <div class="slide-content">
                    <h1>新鲜蔬菜组合</h1>
                    <p>每日鲜切，健康配送</p>
                </div>
            </div>
            <div class="slide">
                <img src="images/轮播图2.jpg" alt="营养套餐">
                <div class="slide-content">
                    <h1>精致营养套餐</h1>
                    <p>搭配均衡，美味可口</p>
                </div>
            </div>
            <div class="slide">
                <img src="images/轮播图3.jpg" alt="四季豆茄子">
                <div class="slide-content">
                    <h1>四季豆茄子组合</h1>
                    <p>新鲜蔬菜，健康搭配</p>
                </div>
            </div>
            <div class="slide">
                <img src="images/轮播图5.jpg" alt="西兰花胡萝卜">
                <div class="slide-content">
                    <h1>西兰花胡萝卜套餐</h1>
                    <p>营养美味，健康搭配</p>
                </div>
            </div>
        </div>
        <div class="slider-controls">
            <button class="prev-slide"><i class="fas fa-chevron-left"></i></button>
            <button class="next-slide"><i class="fas fa-chevron-right"></i></button>
        </div>
        <div class="slider-dots"></div>
    </section>

    <!-- 热销推荐 -->
    <section class="hot-products">
        <div class="section-header">
            <h2>热销推荐</h2>
            <a href="#" class="view-more">查看更多 <i class="fas fa-chevron-right"></i></a>
        </div>
        <div class="products-grid">
            <!-- 产品卡片将通过JavaScript动态生成 -->
        </div>
    </section>

    <!-- 个性化推荐 -->
    <section class="personalized-recommendations">
        <h2>为您推荐</h2>
        <div class="recommendations-grid">
            <!-- 推荐产品将通过JavaScript动态生成 -->
        </div>
    </section>

    <footer>
        <div class="footer-content">
            <div class="footer-section">
                <h3>关于我们</h3>
                <p>"农情净享"数智化净菜助农平台，以助力乡村振兴、引领健康饮食为愿景，致力于构建可持续发展的净菜产业生态系统。平台期望通过整合资源、优化产业环节，在推动农业发展的同时，更好地满足消费者对健康、便捷饮食的需求，实现净菜产业经济与社会效益的双提升。</p>
            </div>
            <div class="footer-section">
                <h3>联系方式</h3>
                <p>电话：18507912585</p>
                <p>邮箱：3421315652@qq.com</p>
            </div>
        </div>
    </footer>

    <script src="js/main.js"></script>
    <script src="js/recommendations.js"></script>
</body>
</html> 